<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ThinkCSS 左右可控制图片滚动,图片自动滚动</title>
<style type="text/css">

	 /** 版权所有: ThinkCSS
 	* 网站地址: http://code.google.com/p/thinkcss/*/
	
	*{ margin:0; padding:0; border:0; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
	.roll{
		width:900px; height:100px; margin:50px auto;
	}
	.roll .left , .roll .right{
		width:40px; height:100px; line-height:100px; float:left; display:inline; font-weight:bold; font-size:50px; cursor:pointer;
	}
	.roll .inner{
		width:700px; float:left; display:inline; overflow:hidden;
	}
	.roll .inner ul{
		width:5000px;
	}
	.roll .inner ul li {
		list-style:none; width:88px; height:98px; float:left; display:inline; background:#ccc; border:#333 solid 1px; margin-right:10px; line-height:98px; text-align:center; color:#999;
	}
	.roll .inner ul li img{
		
	}
	
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript">
	
	
	 /** 版权所有: ThinkCSS
 	* 网站地址: http://code.google.com/p/thinkcss/*/
	
	$(function(){
		
		// 添加Jquery扩展的写法
		$.extend({
			autoChange:function(){
				$('.roll ul').animate({'marginLeft':-100},function(){
					$(this).css('marginLeft',0).find('li:first').appendTo($(this));
				});
			}
		})
		// 函数重复调用，基于jQuery的方法一定要以上面的写法定义，否则这里不会生效
		setInterval("$.autoChange()",3000);

		
		$('.roll .left').click(function(){
			
			// 将整个ul设置动画方式负移位，制造图片左移的效果，然后设置移位为0，将第一张图片获取补到最后，到这里整个图片左移效果完成
			$('.roll ul').animate({'marginLeft':-100},function(){
				$(this).css('marginLeft',0).find('li:first').appendTo($(this));
			});
		},
		function(){});
		
		$('.roll .right').click(function(){
		
			// 同上
			$('.roll ul').css('marginLeft',-100).find('li:last').prependTo($('.roll ul'));
			$('.roll ul').animate({'marginLeft':0});
		},
		function(){})
	})
</script>
</head>

<body>

<div class="roll">
    <div class="left">&lt;</div>
    <div class="inner">
  <ul>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
        <li>ThinkCSS</li>
    </ul>
    </div>
    <div class="right">&gt;</div>
</div>

<center>ThinkCSS原创，转载请注明来源, 下载ThinkCSS: <a href="http://code.google.com/p/thinkcss/">http://code.google.com/p/thinkcss/</a>
</center>
 
</body>
</html>


         